<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
    >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['生产管理','不合格品处理待执行']" marginBottom="10px" currentMenu="发起返修"></crumbs>
    <div class="form-body">
      <div class="cards-box">
        <a-card title="处理信息" :bordered="false">
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">工单编号</p>
              <p class="secondary-text">{{ repairForm.orderCode }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">生产产品</p>
              <p class="secondary-text">{{ repairForm.goodsName }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">规格</p>
              <p class="secondary-text">{{ repairForm.spec }}</p>
            </div>
          </div>
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">工序</p>
              <p class="secondary-text">{{ repairForm.processFullName }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">基本单位</p>
              <p class="secondary-text">{{ repairForm.basicUnitText }}</p>
            </div>
            <div class="detail-item"></div>
          </div>
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">操作人</p>
              <p class="secondary-text">{{ repairForm.operatorIdText }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">提交人</p>
              <p class="secondary-text">{{ repairForm.applicantIdText }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">提交时间</p>
              <p class="secondary-text">{{ repairForm.applyTime }}</p>
            </div>
          </div>
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">处理类型</p>
              <p class="secondary-text">{{ repairForm.handleTypeText }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">处理人</p>
              <p class="secondary-text">{{ repairForm.handlerIdText }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">处理时间</p>
              <p class="secondary-text">{{ repairForm.handleTime }}</p>
            </div>
          </div>
        </a-card>
        <a-card title="执行信息" :bordered="false" style="margin-top:12px">
          <div class="item-wrap" style="margin-bottom: 40px">
            <div class="detail-item">
              <p class="subtitle">批次编号</p>
              <p class="btn-text" @click="batchRecord">{{ repairForm.batchCode || '-' }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">处理数量</p>
              <p class="secondary-text">{{ repairForm.num || '-' }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">处理单位</p>
              <p class="secondary-text">{{ repairForm.reportWorkUnitText || '-' }}</p>
            </div>
          </div>
          <a-form-model  layout="vertical" ref="ruleForm" :model="repairForm" :rules="rules">
            <a-form-model-item label="返修工序" required prop="taskId">
              <a-select placeholder="请选择" v-model="repairForm.taskId" allowClear @select="selectTask">
                <a-select-option v-for="p in processList" :key="p.taskId" :value="p.taskId">{{ p.processName }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="返修单位">
              <a-input placeholder="-" disabled v-model="repairForm.repairReportWorkUnitText" />
              <a-tooltip style="position:absolute;right:-28px;top:0px">
                <template slot="title">
                  为选中工序的报工单位，若单位与报工单位不同，则根据产品的单位换算比例得出返修量
                </template>
                <a-icon type="question-circle" />
              </a-tooltip>
            </a-form-model-item>
            <a-form-model-item>
            </a-form-model-item>
          </a-form-model>
          <a-form-model  layout="vertical">
            <a-form-model-item label="返修量">
              <a-input placeholder="-" disabled v-model="repairForm.repairNum" />
            </a-form-model-item>
          </a-form-model>
          <a-form-model  layout="vertical">
            <a-form-model-item label="备注" style="flex:1">
              <a-textarea placeholder="请输入" :maxLength="500" v-model="repairForm.remark" auto-size />
            </a-form-model-item>
          </a-form-model>
          <a-form-model  layout="vertical">
            <a-form-model-item label="附件" style="flex:1">
              <file-upload :ids="repairForm.attachment" @getFileList="getFileList"></file-upload>
              <p style="line-height: 30px;color:#8d8d8d;">最多上传5个文件，每个大小不可超过20M</p>
            </a-form-model-item>
          </a-form-model>
        </a-card>
      </div>
    </div>

    <div class="footer-submit form-footer">
      <a-button type="primary" :loading="loadingSubmit" @click="handleSubmit">
        提交
      </a-button>
    </div>
    <batch-production ref="BatchProduction"></batch-production>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileUpload from '@/components/fileActions/FileUpload.vue'
import { API } from '@/api/requestFzs'
import { integerNum, validateDuplicateValue, commafyTofixed } from '@/utils/util'
import BatchProduction from '@/pubComponent/BatchProduction'
export default {
  data() {
    return {
      jkeForm: {
        title: '发起返修',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      validateDuplicateValue,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
      attachment: '',
      submitApi: API.messDeviceAdd,
      isEdit: false,
      queryId: '',
      repairForm: {
        attachment: ''
      },
      processList: [],
      rules: {
        taskId: [
          { required: true, message: '返修工序必填', trigger: 'change' },
        ]
      },
      loadingSubmit: false
    }
  },
  components: {
    FileUpload,
    crumbs,
    BatchProduction
  },
  methods: {
    // 批次生产记录弹窗列表
    batchRecord() {
      let obj = {
        id: this.repairForm.batchId,
        orderId: this.repairForm.orderId,
        batchCode: this.repairForm.batchCode,
      }
      this.$refs.BatchProduction.showModal(obj,'C')
    },
    changeWarranty(v) {
      console.log(v)
      this.$nextTick(() => {
        this.form.setFieldsValue({
          warranty: integerNum(v.target.value)
        })
      })
    },
    selectTask(v) {
      let pro = this.processList.find(item => item.taskId == v)
      let { reportWorkRate, num } = this.repairForm
      let processWorkRate = pro.processWorkRate
      this.repairForm.repairNum = commafyTofixed((num / reportWorkRate)*processWorkRate)
      this.repairForm.repairReportWorkUnit = pro.processWorkUnit
      this.repairForm.repairTaskId = v
      this.repairForm.repairReportWorkUnitText = pro.processWorkUnitText
      // this.$nextTick(() => {
      //   this.$refs.ruleForm.validateField(['taskId']);
      // });
      console.log(v)
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    /* 获取编辑详情 */
    initForm(query) {
      this.jkeForm.visible = true
      this.repairForm = {
        ...query,
        ...this.repairForm
      }
      console.log(this.repairForm)
      API.getFullProcessByOrderId({orderId: this.repairForm.orderId, taskId: this.repairForm.oldTaskId}).then(res => {
        if (res.result) {
          this.processList = res.result
        }
      })
    },
    /* 自动生成 */
    genEntityCode() {
      API.genEntityCode({entityCode: 'MESS_DEVICE'}).then(res => {
        if (res.code == 200) {
          this.form.setFieldsValue({
            deviceCode: res.result
          })
        } else {
          this.$antdMessage.error(res.message)
        }
      })
    },
    /* 获取附件 */
    getFileList(v) {
      this.repairForm.attachment = v
      console.log('上传的附件id：', v)
    },
    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.repairForm.repairNum) {
            this.repairForm.repairNum = this.repairForm.repairNum.replace(/,/gi,'')
          }
          this.loadingSubmit = true
          API.messNotQualityHandleIinfoDetailExecuteRepair(this.repairForm).then(res => {
            this.loadingSubmit = false
            if (res.code == 200) {
              this.$antdMessage.success('返修成功！')
              this.$emit('refresh')
              this.goBack()
            } else {
              this.$antdMessage.error(res.message)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
/deep/.ant-form-vertical {
  display: flex;
  justify-content: space-between;
  .ant-form-item {
    width: 30%;
  }
}
.form-body {
  height: calc(100vh - 120px);
  overflow-y: scroll;
}
.code-btn {
  position: absolute;
  right: 0;
  top: -34.5px;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-wrap:nth-of-type(n+2) {
  margin-top: 40px;
}
.detail-item {
  width: 30%;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}
.cards-box {
  height: calc(100vh - 120px);
  overflow-y: scroll;
}
</style>
